<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单事件</title>
</head>
<body>
    <div>
        <ul>
            <li>submit:当表单提交时触发,用于form标签</li>
            <li>reset:当表单重置时触发，用于form标签</li>
            <li>change:当内容发生改变时触发，一般用于input，select,textarea标签</li>
        </ul>
    </div>
    <div>
        <form id="form">
            <input type="text" id="input">
            <input type="submit" value="提交">
        </form>
    </div>

<script>
    var input=document.getElementById('input');
    var form=document.getElementById('form');
    function submit(){
        if(input.value===''){
            alert('请输入用户名');
        }
        console.log('已提交')
    }
    form.addEventListener('submit',submit)

    input.onchange=function (){
        console.log('changed');
    }
</script>
</body>
</html>